@model WalkingTec.Mvvm.Doc.ViewModels.MajorVms.MajorVm

<wt:fieldset field-set-style="Simple" title="Textbox">
 </wt:fieldset>
   <p>Common properties of ColorPicker are:</p>
        <table lay-filter="parse-table-demo">
            <thead>
                <tr>
                    <th lay-data="{field:'username', width:200}">properties</th>
                    <th lay-data="{field:'joinTime', width:600}">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>Control ID, generated according to the bound field name by default</td>
                </tr>
                <tr>
                    <td>Field</td>
                    <td>Binding field, required</td>
                </tr>
                <tr>
                    <td>Disabled</td>
                    <td>Disabled,or not</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>Control name, generated by default according to the bound field name</td>
                </tr>
                <tr>
                    <td>LabelText</td>
                    <td>Label content</td>
                </tr>
                <tr>
                    <td>LabelWidth</td>
                    <td>Label length, default =80</td>
                </tr>
                <tr>
                    <td>HideLabel</td>
                    <td>Hide label, or not</td>
                </tr>
                <tr>
                    <td>EnableAlpha</td>
                    <td>Is alpha is enabled</td>
                </tr>
                <tr>
                    <td>PredefinedColors</td>
                    <td>Is predefined colors are shown</td>
                </tr>
            </tbody>
        </table>
    <div style="height:10px;">&nbsp;</div>
        <wt:tab>
            <wt:tabheaders>
                <wt:tabheader title="Effect" />
                <wt:tabheader title="Code" />
            </wt:tabheaders>
            <wt:tabcontents>
                <wt:tabcontent>
                    <wt:form vm="@Model" style="max-width:600px;">
                        <wt:colorpicker field="Entity.Color1" padding-text="default mode"/>
                        <wt:colorpicker enable-alpha="true" field="Entity.Color2" padding-text="enable alpha" />
                        <wt:colorpicker enable-alpha="true" predefined-colors="" field="Entity.Color3" padding-text="show default predefined colors"/>
                        <wt:colorpicker enable-alpha="true" predefined-colors="#ff000000,#00ff00cc,#0000ffff" field="Entity.Color4" padding-text="show custom colors"/>
                         <wt:colorpicker field="Entity.Color5" change-func="colorchange" padding-text="color change event"/>
                       <wt:row align="AlignEnum.Right">
                            <wt:submitbutton disabled="true" />
                            <wt:closebutton disabled="true" />
                        </wt:row>
                    </wt:form>
                </wt:tabcontent>
                <wt:tabcontent>
                  <wt:code>
&ltwt:form vm="@Model" style="max-width:600px;"&gt
  &ltwt:colorpicker field="Entity.Color1" /&gt //default mode
  &ltwt:colorpicker enable-alpha="true" field="Entity.Color2" /&gt //enable alpha
  &ltwt:colorpicker enable-alpha="true" predefined-colors="" field="Entity.Color3" /&gt //show default predefined colors
  &ltwt:colorpicker enable-alpha="true" predefined-colors="#ff000000,#00ff00cc,#0000ffff" field="Entity.Color4" /&gt //show custom colors
  &ltwt:colorpicker field="Entity.Color5" change-func="changecolor" /&gt //color change event
  &ltwt:row align="AlignEnum.Right"&gt
    &ltwt:submitbutton disabled="true" /&gt
    &ltwt:closebutton disabled="true" /&gt
  &lt/wt:row&gt
&lt/wt:form&gt
&ltscript&gt
  function colorchange(data) {
    alert(data);
  }
&lt/script&gt
                  </wt:code>
                </wt:tabcontent>
            </wt:tabcontents>
        </wt:tab>

    <script>
    layui.use('code',function(){layui.code({ about: false })})
        layui.table.init('parse-table-demo', {
        limit: 100, page: false
        });
    </script>

<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
  function colorchange(data) {
    alert(data);
  }
</script>
